<template>
	<view class="orderItem" v-if="source.id" @click="goDetail">
		<view class="title-wrapper">
			<view class="title">
				{{ source.customerPetName }}
			</view>
			<view class="status">
				<text v-if="source.orderStatus === 0">待支付</text>
				<text v-else-if="source.orderStatus === 1">预定成功</text>
				<text v-else-if="source.orderStatus === 2">已取消</text>
				<text v-else-if="source.orderStatus === 3">退款中</text>
				<text v-else-if="source.orderStatus === 4">被拒单</text>
			</view>
		</view>
		<view class="detail-wrapper">
			<view v-if="source.itemList" class="list" style="overflow: hidden;">
				<view class="item" v-if="index<3 || show" v-for="(item,index) in source.itemList" :key="index">
					<view class="name">
						<text>{{ index + 1 }}.{{ item.productName }}</text>
					</view>
					<view class="weight">
						{{ item.quantity }}件
					</view>
					<view class="amount">
						{{ parseFloat(item.productPayment).toFixed(2) }}元
					</view>
				</view>
				<!-- <view class="item" v-if="source.freightAmount > 0">
					<view class="name"></view>
					<view class="amount">
						运费：{{ source.freightAmount }}元
					</view>
				</view> -->
			</view>
			<view v-if="source.itemList.length>3" class="more" @click.stop="show = !show">
				<text>{{ show ?'收起列表':'展开列表'}}</text>
				<uni-icons v-if="show" type="top" size="12" class="icon" color="#F26022"></uni-icons>
				<uni-icons v-else type="bottom" size="12" class="icon" color="#F26022"></uni-icons>
			</view>
			<!-- <view class="line">

			</view> -->
			<view class="amount-info-wrapper fee">
				<view class="amount">
					<text>代采费:{{ source.serviceFee }}元</text>
				</view>
				<view class="amount flex">
					<text>运费:{{ source.freight }}元</text>
				</view>
				<view class="amount">
					<text>金融手续费:{{ source.payFee }}元</text>
				</view>
			</view>

			<view class="amount-info-wrapper">
				<view class="quantity">
					共{{ totalCount }}件
				</view>
				<!-- <view class="amount" v-if="source.freightAmount != -1 && source.freightAmount != -2">
					合计：{{ source.totalAmount === -1 ? '待定' : source.totalAmount + '元' + (source.freightAmount ? '(含运费:'+source.freightAmount+'元)': '') }}
				</view> -->
				<view class="amount">
					<text>合计：{{ source.amount }}元</text>
				</view>
			</view>
			<view class="line">

			</view>
		</view>
		<view class="bottom-wrapper">
			<view class="date">
				<text v-if="source.orderStatus === 0">{{ source.createTime.substring(5,16) }}</text>
				<text v-else-if="source.orderStatus === 1">{{ source.payTime.substring(5,16) }}</text>
				<text v-else-if="source.orderStatus === 2">{{ source.updateTime.substring(5,16) }}</text>
			</view>
			<!-- <view class="btn-wrapper">
				<view v-if="source.orderStatus === 0" @click.stop="cancelOrder" class="btn default">
					取消订单
				</view>
				<view v-if="source.orderStatus === 0" @click.stop="placeOrderConfirm" class="btn primary">
					付款
				</view>
				<view v-if="source.orderStatus > 0" class="btn default">
					再来一单
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			source: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				show: false
			}
		},
		computed: {
			totalCount() {
				let count = 0;
				if (this.source && this.source.itemList) {
					this.source.itemList.forEach(item => {
						count += parseInt(item.quantity)
					})
				}
				return count;
			},
		},
		mounted() {

		},
		methods: {
			async goDetail() {
				// const data = await this.$api.get('/app/order/getInfo', {
				// 	id: this.source.id
				// })
				uni.navigateTo({
					url: '/subPage_order/orderDetail?id=' + this.source.id
				})
			},
			cancelOrder() {
				uni.showModal({
					title: '取消订单',
					content: '是否要取消订单？',
					success: async (e) => {
						if (e.confirm) {
							await this.$api.post('/app/order/cancel', {
								id: this.source.id
							})
							uni.showToast({
								title: '订单已取消'
							})
							this.$emit('refresh')
						}
					}
				})
			},
			async placeOrderConfirm() {
				uni.showModal({
					title: '支付',
					content: '是否进行支付？',
					success: async (e) => {
						if (e.confirm) {
							await this.$api.post('/app/order/pay', {
								id: this.source.id
							})
							uni.showToast({
								title: '订单已支付'
							})
							this.$emit('refresh')
						}
					}
				})
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.orderItem {
		.title-wrapper {
			display: flex;
			align-items: center;
			padding: 20upx 25upx;

			.title {
				font-size: 32upx;
				font-weight: bold;
				flex: 1;
			}

			.status {
				color: #f90;
				font-size: 32upx;
			}
		}

		.detail-wrapper {
			border-radius: 8upx;
			margin: 0upx 0;
			padding: 0upx 34upx 0 34upx;

			.item {
				font-size: 28upx;
				display: flex;
				margin-bottom: 10upx;

				&:last-child {
					margin-bottom: 0;
				}

				.name {
					flex: 1;
					color: #5B5B5B;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.weight {
					margin: 0 36upx;
					color: #808080;
				}

				.amount {
					min-width: 100upx;
					color: #2B2B2B;
					text-align: right;
				}
			}

			.more {
				color: #F26022;
				font-size: 28upx;
				text-align: center;
				margin: 10upx 0;

				.icon {
					font-weight: bold;
					margin-left: 6upx;
					transition: .1s linear;
					transform: rotate(180deg);

					&.open {
						transform: scale(.2)
					}
				}
			}

			.line {
				border-bottom: 2upx dashed #DEE0DE;
			}

			.amount-info-wrapper {
				height: 62upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;

				.quantity {
					color: #B8B8B8;
				}

				.amount {
					color: #000000;
				}

				&.fee {
					.amount {
						color: #2B2B2B;
					}

					.flex {
						flex: 1;
						text-align: center;
					}
				}
			}
		}

		.bottom-wrapper {
			height: 70upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15upx 0;

			.date {
				font-size: 28upx;
				line-height: 28upx;
				color: #999999;
				display: flex;
				align-items: center;
				margin-left: 30upx;

				.order-type {
					margin-right: 10upx;
				}
			}

			.btn-wrapper {
				display: flex;
				align-items: center;
				margin: 10upx 0;
				padding: 0 30upx;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60rpx;
					min-width: 80rpx;
					padding: 0upx 20upx;
					background-color: #ffffff;
					border: 1upx solid #D6D6D6;
					border-radius: 10upx;
					font-size: 28upx;
					margin-left: 15upx;

					&.primary {
						color: #ffffff;
						background-color: #F26022;
						border-color: #F26022;
					}
				}
			}
		}
	}
</style>